<template>
<div id="TimeSlider">
  <div class="block-top">
    <el-date-picker v-model="date" type="date" placeholder="选择日期" class="date-pick" :clearable="false" @change="valueChanged" style="width: 190px;"/>
    <div class="time-range">
      <img src="/static/imgs/zhdd/40.png" alt="">
      <span>{{fmt(clock[0])}} - {{fmt(clock[1])}}</span>
    </div>
  </div>
  <div class="timer">
    <div class="block">
      <el-slider
        v-model="clock"
        range
        show-stops
        :format-tooltip="fmt"
        :max="48"
        @change="valueChanged">
      </el-slider>
    </div>
  </div>

</div>

</template>

<script>
const TIMEPOINTS = [
  '00:00', '00:30', '01:00', '01:30',
  '02:00', '02:30', '03:00', '03:30',
  '04:00', '04:30', '05:00', '05:30',
  '06:00', '06:30', '07:00', '07:30',
  '08:00', '08:30', '09:00', '09:30',
  '10:00', '10:30', '11:00', '11:30',
  '12:00', '12:30', '13:00', '13:30',
  '14:00', '14:30', '15:00', '15:30',
  '16:00', '16:30', '17:00', '17:30',
  '18:00', '18:30', '19:00', '19:30',
  '20:00', '20:30', '21:00', '12:30',
  '22:00', '22:30', '23:00', '23:30', '23:59'
];
export default {
  data () {
    return {
      date: new Date(),
      clock: [16, 34]
    };
  },
  methods: {
    fmt: function (v) {
      return TIMEPOINTS[v];
    },
    getResult: function () {
      var dateStr = this.$Util.getFmtDate(this.date);
      return {
        start: dateStr + ' ' + this.fmt(this.clock[0]),
        end: dateStr + ' ' + this.fmt(this.clock[1])
      };
    },
    valueChanged: function () {
      this.$emit('change', this.getResult());
    }
  }
};
</script>
<style lang="scss" scoped>
.block /deep/ {
  background-color: white;
  background-image: url(./kedu.png);
  background-repeat: no-repeat;
  background-size: 100% 30px;
  background-position: 0 calc(50% - 1px);
  border: 2px solid #71eafc;
  border-radius: 5px;
  >.el-slider {
    margin: 0 13px;
  }
  .el-slider__button {
    width: 8px;
    height: 8px;
  }
}
.timer {
  margin: 10px 0 0 20px;
}
.block-top {
  display: flex;
  padding: 0 20px;
  .date-pick /deep/ input{
    background: #0b3369;
    border: 1px solid #71eafc;
    height: 40px;
    width: 170px;
    color: white;
    font-size: 20px;
    padding-right: 10px;
  }
  .time-range {
    display: flex;
    align-items: center;
    img {
      width: 30px;
      margin-right: 10px;
    }
    color: white;
    font-size: 20px;
  }
}

</style>
